<template>
  <div>
    <div class="head">
      <!-- 日期区间选择器 -->
      <Date_Picker v-model="dateText" />
      <el-button type="primary" class="ml-25" @click="getdateArr">{{
        show ? "隐藏dateArr" : "显示dateArr"
      }}</el-button>
      <div class="content mt-20">
        <span v-if="show && dateText[0] == null && dateText[1] == null">
          暂无数据
        </span>
        <span v-else-if="show">
          {{ dateText }}
        </span>
        <!-- {{dateText[1]}} -->
      </div>
    </div>

    <!-- <div id="inviteCode">123456qqq</div> -->
    <el-input v-model="text" style="width: 200px"></el-input>
    <el-button @click="copy" type="primary">复制左边数据</el-button>
    <el-button @click="copyLink('嘿嘿\r\n我换行了')" type="primary"
      >复制换行数据
    </el-button>
    <el-button @click="copyInfo(Info)">复制</el-button>
    <!-- 时间选择控件，图标为日期格式且显示于右侧 -->
    <el-date-picker
      :class="[
        'date-picker-icon',
        dateVisableArray == 'true' ? 'date-close' : '',
      ]"
      v-model="preparationTime"
      type="date"
      @mouseover.native="setDateIcon"
      @mouseleave.native="dateVisableArray = 'false'"
    />
  </div>
</template>
<script>
import Clipboard from "clipboard";
export default {
  components: {
    Date_Picker: () => import("../components/newDatePicker"),
  },
  data() {
    return {
      btnCopy: "",
      preparationTime: "",
      searchItem: {
        disabled: "",
      },
      dateVisableArray: 'false',
      dateText: ["2021-04-08", "2021-05-11"], // 接收日期选择器组件传过来的值
      show: false,
      text: "哈哈哈哈",
      imgurl:
        "http://192.168.2.121:9100/attachment/open?attachmentId=2a489b9d-edcb-4598-8749-0669246a2b81&rnd=0",
      Info: {
        txts: "嘿嘿<br>我换行了",
        imgs: [
          "http://192.168.2.121:9100/attachment/open?attachmentId=2a489b9d-edcb-4598-8749-0669246a2b81&rnd=0",
          "https://img.shop.wusehaowu.com/20210407/da46894987254688af008a95ad121da9.png",
          "https://t00img.yangkeduo.com/goods/images/2021-02-27/1e5bc93f957fefabc13d994a9f379dda.jpeg",
        ],
      },
    };
  },
  mounted() {},
  methods: {
    setDateIcon() {
      if (this.preparationTime == "" || this.preparationTime == null) {
        return false;
      }
      this.dateVisableArray = "true";
    },

    // 复制文字和图片
    copyInfo(sets) {
      console.log("🚀 ~ file: Test.vue ~ line 110 ~ copyInfo ~ sets", sets);
      let imgDiv = document.createElement("div");
      imgDiv.id = "__imgDiv";
      imgDiv.setAttribute("style", "z-index: -1;position: fixed;");
      let child = "";
      if (sets.txts) {
        if (typeof sets.txts === "string") {
          child += `<span>${sets.txts}</span><br>`;
        } else {
          sets.txts.forEach((item) => {
            child += `<span>${item}</span><br>`;
          });
        }
      }
      if (sets.imgs) {
        if (typeof sets.imgs === "string") {
          sets.imgs =
            sets.imgs.indexOf("https") > -1
              ? sets.imgs.replace("https", "http")
              : sets.imgs;
          child += `<img src="${sets.imgs}" />`;
        } else {
          sets.imgs.forEach((item) => {
            item =
              item.indexOf("https") > -1 ? item.replace("https", "http") : item;
            child += `<img src="${item}" />`;
          });
        }
      }
      imgDiv.innerHTML = child;
      document.body.insertBefore(imgDiv, document.body.lastChild);
      let dom = document.getElementById("__imgDiv");
      console.log(dom);
      if (window.getSelection) {
        //chrome等主流浏览器
        let selection = window.getSelection();
        let range = document.createRange();
        range.selectNodeContents(dom);
        selection.removeAllRanges();
        selection.addRange(range);
      } else if (document.body.createTextRange) {
        //ie
        let range = document.body.createTextRange();
        range.moveToElementText(dom);
        range.select();
      }
      document.execCommand("copy");
      window.getSelection().removeAllRanges();
      imgDiv.parentNode.removeChild(imgDiv);
    },
    // 复制换行文字
    copyLink(value, cb) {
      // 动态创建 textarea 标签
      const textarea = document.createElement("textarea");
      // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘，同时将 textarea 移出可视区域
      textarea.readOnly = "readonly";
      textarea.style.position = "absolute";
      textarea.style.left = "-9999px";
      // 将要 copy 的值赋给 textarea 标签的 value 属性
      textarea.value = value;
      // 将 textarea 插入到 body 中
      document.body.appendChild(textarea);
      // 选中值并复制
      textarea.select();
      textarea.setSelectionRange(0, textarea.value.length);
      document.execCommand("Copy");
      document.body.removeChild(textarea);
      if (cb && Object.prototype.toString.call(cb) === "[object Function]") {
        cb();
      }
    },

    getdateArr() {
      this.show = !this.show;
      console.log("dates", this.dateText);
    },
    copy() {
      let oInput = document.createElement("input");
      oInput.value = this.text;
      document.body.appendChild(oInput);
      oInput.select(); // 选择该元素的文本
      document.execCommand("Copy"); // 执行浏览器复制命令
      oInput.className = "oInput";
      oInput.style.display = "none";
      this.$message({
        message: "复制成功",
        type: "success",
      });
    },
  },
  created() {
    console.log('route', this.$route)
    console.log('router', this.$router)
  },
};
</script>	
<style lang="less">
.content {
  height: 50px;
  // background: brown;
}

.date-picker-icon {
  width: 100%;
  .el-input__inner {
    padding-left: 15px;
    padding-right: 30px;
  }

  .el-input__prefix {
    color: blue;
    left: initial;
    right: 5px;
  }
  &.date-close {
    .el-icon-date {
      display: none;
    }
  }
}
</style>

